<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="../../css/prettify.css" />
<script type="text/javascript" src="../../js/prettify.js"></script>
</head>
<body onload="prettyPrint();">
<h1>UI管理之Section</h1>
<hr />
<h2>详情页模板details_template</h2>
<pre class="prettyprint linenums">&lt;div class="module mod-s{ui_section:value} ding"&gt;
&lt;h3&gt;&lt;span&gt;步步街知识库&lt;/span&gt;&lt;/h3&gt;
&lt;div class="content ding"&gt;
&lt;ul class="categories-module_snb"&gt;
&lt;li&gt;&lt;a href="#"&gt;JavaScript&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;HTML &amp;amp; CSS&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;PHP&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Database&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Joomla!&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;PrestaShop&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;工具相关&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;编码约定&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;参考资料&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;批处理&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="blank"&gt; &lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;&lt;img src="infobox/{ui_section:value}_thumb.gif" border="0" alt="" /&gt;&lt;/p&gt;
&lt;pre&gt;pre{border:1px dashed #666;}
.module li{list-style:none;font-size:12px;font-family:dotum;}
.mod-s{ui_section:value}{margin:10px;}
.mod-s{ui_section:value} h3{
	background:url(/infobox/{ui_section:value}_head.gif) no-repeat;
	margin:0 !important;
	padding:0 !important;
	padding-top:{head_paddingtop:value}px !important;
	height:{head_lineheight:value}px !important;
	line-height:{head_lineheight:value}px !important;
	padding-left:15px !important;
	color:#{head_color:value} !important;
	font-size:13px !important;
}
.mod-s{ui_section:value} .content{background:url(/infobox/{ui_section:value}_body.gif) repeat-y;padding-top:10px;padding-bottom:10px;}
.mod-s{ui_section:value} .content ul{margin:0 !important;padding-left:15px !important;}
.mod-s{ui_section:value} .content ul li{background:url(/infobox/{ui_section:value}_arw.gif) 0 4px no-repeat;padding-left:15px !important;line-height:1.5em;}
.mod-s{ui_section:value} .content ul li a{color:#7D7D7D;}
.mod-s{ui_section:value} .blank{background:url(/infobox/{ui_section:value}_footer.gif) no-repeat;height:{foot_img_height:value}px;}
&lt;/pre&gt;</pre>

    <div class="module mod-s{ui_section:value} ding">
    <h3><span>步步街知识库</span></h3>
    <div class="content ding">
    <ul class="categories-module_snb">
    <li><a href="#">JavaScript</a></li>
    <li><a href="#">HTML &amp; CSS</a></li>
    <li><a href="#">PHP</a></li>
    <li><a href="#">Database</a></li>
    <li><a href="#">Joomla!</a></li>
    <li><a href="#">PrestaShop</a></li>
    <li><a href="#">工具相关</a></li>
    <li><a href="#">编码约定</a></li>
    <li><a href="#">参考资料</a></li>
    <li><a href="#">批处理</a></li>
    </ul>
    </div>
    <div class="blank"> </div>
    </div>
    <p><img src="infobox/{ui_section:value}_thumb.gif" border="0" alt="" /></p>
    <pre>
    pre{border:1px dashed #666;}
    .module li{list-style:none;font-size:12px;font-family:dotum;}
    .mod-s{ui_section:value}{margin:10px;}
    .mod-s{ui_section:value} h3{
    background:url(/infobox/{ui_section:value}_head.gif) no-repeat;
    margin:0 !important;
    padding:0 !important;
    padding-top:{head_paddingtop:value}px !important;
    height:{head_lineheight:value}px !important;
    line-height:{head_lineheight:value}px !important;
    padding-left:15px !important;
    color:#{head_color:value} !important;
    font-size:13px !important;
    }
    .mod-s{ui_section:value} .content{background:url(/infobox/{ui_section:value}_body.gif) repeat-y;padding-top:10px;padding-bottom:10px;}
    .mod-s{ui_section:value} .content ul{margin:0 !important;padding-left:15px !important;}
    .mod-s{ui_section:value} .content ul li{background:url(/infobox/{ui_section:value}_arw.gif) 0 4px no-repeat;padding-left:15px !important;line-height:1.5em;}
    .mod-s{ui_section:value} .content ul li a{color:#7D7D7D;}
    .mod-s{ui_section:value} .blank{background:url(/infobox/{ui_section:value}_footer.gif) no-repeat;height:{foot_img_height:value}px;}
    </pre>
<hr />
<h2>详情页预处理details_prepare</h2>
<pre class="prettyprint linenums">//获取值
$ui_section = $items["ui_section"]["value"];
$head_paddingtop = $items["head_paddingtop"]["value"];
$head_paddingbottom = $items["head_paddingbottom"]["value"];
$head_img_height = $items["head_img_height"]["value"];
$head_color = $items["head_color"]["value"];
$foot_img_height = $items["foot_img_height"]["value"];
//预处理
if(!$head_paddingtop){ $items["head_paddingtop"]["value"] = 0; }
$ui_section = $items["ui_section"]["value"] = sprintf("%04d", $ui_section);
$head_lineheight = $items["head_lineheight"]["value"] = $head_img_height - $head_paddingtop - $head_paddingbottom;
//定义CSS
$style = 'pre{border:1px dashed #666;}
.module li{list-style:none;font-size:12px;font-family:dotum;}
.mod-s'.$ui_section.'{margin:10px;}
.mod-s'.$ui_section.' h3{
	background:url(/infobox/'.$ui_section.'_head.gif) no-repeat;
	margin:0 !important;
	padding:0 !important;
	padding-top:'.$head_paddingtop.'px !important;
	height:'.$head_lineheight.'px !important;
	line-height:'.$head_lineheight.'px !important;
	padding-left:15px !important;
	color:#'.$head_color.' !important;
	font-size:13px !important;
}
.mod-s'.$ui_section.' .content{background:url(/infobox/'.$ui_section.'_body.gif) repeat-y;padding-top:10px;padding-bottom:10px;}
.mod-s'.$ui_section.' .content ul{margin:0 !important;padding-left:15px !important;}
.mod-s'.$ui_section.' .content ul li{background:url(/infobox/'.$ui_section.'_arw.gif) 0 4px no-repeat;padding-left:15px !important;line-height:1.5em;}
.mod-s'.$ui_section.' .content ul li a{color:#7D7D7D;}
.mod-s'.$ui_section.' .blank{background:url(/infobox/'.$ui_section.'_footer.gif) no-repeat;height:'.$foot_img_height.'px;}';
//在head中输出CSS
$document =&amp; JFactory::getDocument();
$document-&gt;addStyleDeclaration( $style );</pre>
</body>
</html>
